<script setup>
	import { ref, reactive, watch } from 'vue';

/**
 * watch(响应式对象, 回调函数)
 */
	
	// 关键字
	const key = ref('')
	const k = watch(key, (newVal, oldVal) => {
		console.log(newVal, oldVal);
	})
	// console.log(k); // 看了没有返回值

	// 登入对象
	const loginForm = reactive({
		username: '',
		password: ''
	})
	
	// 可以看出 newVal 与 oldVal 是相同的
	watch(loginForm, (newVal, oldVal) => {
		console.log(newVal, oldVal);
		console.log(newVal === oldVal);
		console.log(newVal === loginForm);
		
	})
</script>

<template>
	<div>
		<input
			type="text"
			placeholder="请输入关键字"
			v-model="key"
		>
		<br>
		<br>
		<input
			type="text"
			placeholder="请输入姓名" v-model="loginForm.username"
		>
		<br>
		<br>
		<input
			type="text"
			placeholder="请输入密码" v-model="loginForm.password"
		>
	</div>
</template>

<style scoped></style>
